<template>
    <div class="menu-tree">
        <label v-for="list in dataList" :key="list.id" class="menu-lable">
            <el-submenu :index="list.id" v-if="list.children.length > 0">
                <template slot="title">
                    <span @click="handleMenuClick(list)">{{list.name}}</span>
                </template>
                <label>
                    <child-menu class="sub-list" :dataList="list.children" :element="element"></child-menu>
                </label>
            </el-submenu>
            <el-menu-item v-else :index="list.id" @click="handleMenuClick(list)">
                <template slot="title">
                    <span>{{list.name}}</span>
                </template>
            </el-menu-item>
        </label>
    </div>
</template>

<script>
import bus from '@/js/event/bus.js';

export default {
    name: 'ChildMenu',
    data() {
        return {
            eventGroup: {}
        };
    },
    props: {
        element: {
            type: Object
        },
        dataList: {
            type: Array
        },
        pageList: {
            type: Array
        },
        mode: {
            type: Number
        }
    },
    methods: {
        handleMenuClick(data) {
            if (this.mode !== 2 || !this.element.event.length) {
                return;
            }
            bus.elementMouseEvent(this.element, 'select', { id: data.id });
        }
    }
};
</script>

<style lang='scss'>
.menu-tree {
    height: 100%;
}
.el-menu {
    background: transparent !important;
    border: none !important;
}
.el-menu--horizontal.el-menu {
    height: 100%;
    background: transparent !important;
}
.el-menu--horizontal .menu-lable {
    float: left;
    height: 100%;
    .el-submenu {
        height: 100%;
        .el-submenu__title {
            height: 100%;
            display: flex;
            align-items: center;
        }
    }
    .el-menu-item {
        height: 100%;
        display: flex;
        align-items: center;
    }
    .el-submenu__title i {
        position: static;
        vertical-align: middle;
        margin-left: 8px;
        margin-top: -3px;
    }
}
.el-menu--popup .menu-lable {
    float: none;
}
.el-menu-item,
.el-submenu__title {
    border: none !important;
    background: transparent !important;
}
.el-menu--popup {
    .sub-list {
        background: #1a1f32ff !important;
    }
}
</style>